<template>
  <div class="RunForGoods" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="跑腿"></myHead>
    <div class="inp">
      <img src="../../../static/img/dingweisousuo.png" alt="">
      <input type="text" placeholder="搜索地点" v-model="searchAddress">
    </div>
    <!--  地图部分  -->
    <div class="maps" :style="{height:$store.state.minHeight-3.5+'rem'}">
      <div id="allmap">

      </div>
    </div>
    <!--  地址展示  -->
    <div class="address">

        <div class="itemWrap">
          <div class="item" v-for="x in [0,1,2,3,4,5]" @click="address(x)">
            <div class="item-l">
              <p class="itemName">池金地广场（雁塔区曲江池东路999号）</p>
              <p><span>100m内</span>&emsp;<span>雁塔区</span></p>
            </div>
            <div class="item-r" v-show="choice == x">
              <img src="../../../static/img/duihao527.png" alt="">
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  export default {
    name: "RunForGoods",
    components: {
      myHead
    },
    data(){
      return {
        choice:-1, // 已选择地址下标
        searchAddress:'',
        lng:'', // 经度
        lat:"", // 纬度
        map:'', // 地图实例
        thisCity:'' // 当前所在城市
      }
    },
    created(){
     this.$nextTick(res=>{
       // 百度地图API功能
       var map = new BMap.Map("allmap");
       this.map = map;
       var point = new BMap.Point(116.331398,39.897445);
       map.centerAndZoom(point,20);

       var geolocation = new BMap.Geolocation();
       geolocation.getCurrentPosition(function(r){
         if(this.getStatus() == BMAP_STATUS_SUCCESS){
           var mk = new BMap.Marker(r.point);
           map.addOverlay(mk);
           map.panTo(r.point);
           console.log(r)
           // 保存当前城市
         }
         else {
           alert('failed'+this.getStatus());
         }
       },{enableHighAccuracy: true,enableScrollWheelZoom:true,disablePinchToZoom:true})
       map.disablePinchToZoom(true)
     })
    },
    mounted(){

    },
    methods:{
      address(index){
        this.choice = index;
        // 反向传值

        this.$router.back();
      },
      // 加载地图
      initMap(){

      }
    },
    watch:{
      searchAddress(){
        // this.map.clearOverlays();
        // var local = new BMap.LocalSearch(this.map, { //智能搜索
        //   onSearchComplete: (LocalResult)=>{
        //     console.log('哈哈哈哈')
        //     var pp = local.getResults().getPoi(0).point;
        //     console.log(local.getResults().getCityList())
        //     this.map.centerAndZoom(pp, 18);
        //   }
        // });
        // local.search('西安');
        this.$axios.get(`http://api.map.baidu.com/place/v2/suggestion?query=${this.searchAddress}&region=西安&city_limit=true&output=json&ak=LvgW0SmF4XeywmX4nrM9Co2WK4WF1rOm`).then(res=>{
          console.log(res);
        })
      }
    }
  }
</script>

<style scoped>
  #allmap {
    width: 100%;
    height: 100%;
  }

  .RunForGoods {
    box-sizing: border-box;
    padding-top: .5rem;
    background-color: #E5E5E5;
  }

  .address {
    width: 100%;
    height: 3.5rem;
    box-sizing: border-box;
    padding: .1rem;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #FFFFFF;
  }
  .inp {
    position: fixed;
    left: 0;
    top: .5rem;
    width: 100%;
    box-sizing: border-box;
    padding-left: .1rem;
    height: .35rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    background-color: #fff;
    text-align: center;
    z-index: 9999;
  }
  .inp>img {
    width: .16rem;
    max-height: .15rem;
    margin-right: .1rem;
  }
  .inp>input {
    width: 90%;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #666666;
    border: none;
    outline: none;
    background-color: transparent;
  }

  .itemWrap {
    height: 2.75rem;
    box-sizing: border-box;
    overflow-y: scroll;
  }
  .item {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .item-l {
    width: 92%;
    height: 100%;
    box-sizing: border-box;
    padding: .05rem 0;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
  }
  .itemName {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #191919;
  }
  .item-l>p:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .item-r {
    width: .19rem;
  }
  .item-r>img {
    width: 100%;
    max-height: .14rem;
  }
  .itemName>span {
    color: #FF8500;
  }
</style>
